<template>
    <div class="t7">
        <div class="t7Title">{{name}}</div>
        <div class="top">
            <div class="cont" @click="gotoCartoon(topData)">
                <div class="img">
                    <img v-lazy="topData.horizontal_cover" alt="">
                    <div class="no">No.1</div>
                </div>
                <div class="name">{{topData.title}} <span v-if="topData.style">{{topData.style[0]}}</span></div>
                <div class="title">{{topData.recommendation!='' ? topData.recommendation :'更新至'+topData.last_short_title+'话'}}</div>
            </div>
        </div>
        <div class="centre">
            <div class="cont" v-for="(item,i) in centreData" :key="i" @click="gotoCartoon(item)">
                <div class="img">
                    <img v-lazy="item.horizontal_cover" alt="">
                    <div class="no">No.{{i+2}}</div>
                </div>
                <div class="name">{{item.title}}</div>
                <div class="title">{{item.recommendation!='' ? item.recommendation :'更新至'+item.last_short_title+'话'}}</div>
            </div>
        </div>
        <div class="bottom">
            <div class="cont" v-for="(item,i) in bottomData" :key="i" @click="gotoCartoon(item)">
                <div class="img">
                    <img v-lazy="item.square_cover" alt="">
                    <div class="no">No.{{i+6}}</div>
                </div>
                <div class="name">{{item.title}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['id','name'],
        data() {
            return {
                topData:{},
                centreData:[],
                bottomData:[]
            }
        },
        created(){
            this.axios({
                url:'GetClassPageSixComics',
                params:{
                    id:this.id,
                    pageNum:1,
                    pageSize:9,
                    isAll:0,
                }
            }).then(res =>{
                if (res.status === 200) {
                    res.data.data.roll_six_comics.forEach((v,i) => {
                        if (i===0) {
                            this.topData=v
                        }else if (i>0&&i<5) {
                            this.centreData.push(v)
                        }else{
                            this.bottomData.push(v)
                        }
                    });
                    
                    
                }
            })
        },
        methods:{
            gotoCartoon(item){
                
                this.$router.push({name:"CartoonContainer",query:{id:item.comic_id}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .cont{
        width: 100%;
        position: relative;
        .img{
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
            img{
                width: 100%;
                display: block;
            }
            .no{
                position: absolute;
                top: 0;
                padding: 5px;
                color: white;
                background-color: rgb(239, 80, 80);
            }
        }
        .name{
            margin-top: 5px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .title{
            margin-top: 10px;
            color: #91939b;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
    .t7{
        margin-top: 20px;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        .t7Title{
            font-size: 16px;
            font-weight: 600;
        }
        .top{
            width: 100%;
            margin-top: 10px;
            .cont{
                .name{
                    font-size: 18px;
                    font-weight: 600;
                    span{
                        font-size: 12px;
                        font-weight: 500;
                        color: #60acf8;
                        background-color: #e6f2fd;
                        padding: 1px;
                    }
                }
            }
        }
        .centre{
            width: 100%;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .cont{
                width: 49%;
                margin-top: 15px;
                .title{
                    margin-top: 0;
                }
            }
        }
        .bottom{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .cont{
                width: 23%;
                margin-top: 15px;
                >.name{
                    text-overflow: auto;
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
        }
    }
</style>